<template>
	<view>
		<view class="user-window white flex place">
			<view class="flex">
				<view class="head-window">
					<image :src="userInfo.headimgurl||'/static/logo.png'" class="head" mode="aspectFill"></image>
				</view>
				<view v-if="loginStatus" class="nickname-window">
					<text>{{userInfo.nickname}}</text>
					<view class="flex">
						<text style="font-size: 24rpx;">{{userInfo.username}}</text>
						<text style="margin-left: 10rpx;margin-right: 10rpx;"> / </text>

					</view>

				</view>
				<navigator v-else url="/pages/public/login" hover-class="none" class="nickname-window">
					请登录
				</navigator>
			</view>

			<view v-if="loginStatus" style="width: 20%;">
				<navigator hover-class="none" url="/pages/usercenter/customer/customer" class="btn-item">
					<view class="sign-btn u-text-center">
						联系客服
					</view>
				</navigator>
			</view>
		</view>
		<view v-if="loginStatus" class="card">
			<view class="default-window bold">
				我的钱包
			</view>
			<view class=" flex">
				<view class="default-window" style="width: 50%;">
					<navigator style="font-size: 24rpx;" url="/pages/usercenter/integralRecord/integralRecord?type=0"
						hover-class="none">
						积分：{{walletInfo.num_1}}
					</navigator>
				</view>
				<view v-if="specialPay.length!==0" class="default-window" style="width: 50%;">
					<navigator style="font-size: 24rpx;"
						:url="`/pages/usercenter/integralRecord/integralRecord?type=${specialPay[0]}`"
						hover-class="none">
						{{specialPay[1]}}：{{specialWallet}}
					</navigator>
				</view>
			</view>
		</view>
		<view v-if="loginStatus" class="card">
			<view class="default-window bold">
				订单记录
			</view>
			<view class="flex around order-window">
				<navigator hover-class="none" url="/pages/order/order?type=0" class="item">
					<view style="position: relative;">
						<image src="/static/usercenter/daifukuan.png" class="img" mode="aspectFill"></image>
						<u-badge :count="orderCount[0]" :offset="[-10, -10]"></u-badge>
					</view>
					<view class="title">待支付</view>
				</navigator>
				<navigator hover-class="none" url="/pages/order/order?type=1" class="item">
					<view style="position: relative;">
						<image src="/static/usercenter/daifahuo.png" class="img" mode="aspectFill"></image>
						<u-badge :count="orderCount[1]" :offset="[-10, -10]"></u-badge>
					</view>
					<view class="title">待发货</view>
				</navigator>
				<navigator hover-class="none" url="/pages/order/order?type=2" class="item">
					<view style="position: relative;">
						<image src="/static/usercenter/daishouhuo.png" class="img" mode="aspectFill"></image>
						<u-badge :count="orderCount[2]" :offset="[-10, -10]"></u-badge>
					</view>
					<view class="title">已发货</view>
				</navigator>
				<navigator hover-class="none" url="/pages/order/order?type=3" class="item">
					<image src="/static/usercenter/yiwancheng.png" class="img" mode="aspectFill"></image>
					<view class="title">已完成</view>
				</navigator>
				<navigator hover-class="none" url="/pages/order/order?type=4" class="item">
					<view style="position: relative;">
						<image src="/static/usercenter/daishouhuo.png" class="img" mode="aspectFill"></image>
						<u-badge :count="orderCount[8]" :offset="[-10, -10]"></u-badge>
					</view>
					<view class="title">其他</view>
				</navigator>

			</view>
		</view>
		<view v-if="loginStatus" class="card">
			<view v-if="userInfo.is_provider===1" @tap="scan" class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="scan"></u-icon>
					<view style="padding: 0 30rpx;">扫码核销</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<navigator hover-class="none" url="/pages/address/address"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="map"></u-icon>
					<view style="padding: 0 30rpx;">地址管理</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/usercenter/feedback/feedback"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="photo"></u-icon>
					<view style="padding: 0 30rpx;">意见反馈</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator v-if="userInfo.celebrity_lv==0" url="/pages/public/bind1" hover-class="none"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="lock"></u-icon>
					<view style="padding: 0 30rpx;">绑定手机号码</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/usercenter/aboutUs/aboutUs"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="error-circle"></u-icon>
					<view style="padding: 0 30rpx;">关于我们</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/usercenter/userAgreement/userAgreement"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="order"></u-icon>
					<view style="padding: 0 30rpx;">用户手册</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/usercenter/privacyPolicy/privacyPolicy"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="file-text"></u-icon>
					<view style="padding: 0 30rpx;">隐私政策</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
			<view v-if="userInfo.is_admin==1" @click="showArea=!showArea"
				class="default-window u-border-bottom flex place">
				<view class="flex">
					<u-icon name="bag"></u-icon>
					<view style="padding: 0 30rpx;">切换商城</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-popup height="750rpx" v-model="showArea" mode="bottom">
			<view @click="currentShop(item.shop_id,item.name)" v-for="(item,index) in shopList" :key="index"
				class="default-window">
				{{item.name}}
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				waitRead: 0,
				loginStatus: false,
				orderCount: [],
				walletInfo: {},
				showArea: false,
				shopList: [],

				specialPay: [],
				specialWallet: "0",
			};
		},
		onShow() {
			this.loadUserDetail();
			this.loadShop();
		},
		methods: {
			/**
			 * 打开扫一扫
			 */
			scan() {
				const that = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: async ({
						result
					}) => {
						console.log(result)
						try {
							const res= JSON.parse(result)
							// await orderCheckApi(data)
							console.log(res)
							that.$api('Order/order_check', res).then(data => {
								if (data.status === 1) {
									uni.showModal({
										title: '提示',
										content: data.msg,
										confirmText: '确定',
										showCancel: false
									})
								} else {
									uni.showToast({
										title: data.msg
									})
								}
							})
						} catch (e) {
							//TODO handle the exception
							uni.showToast({
								title: '二维码不匹配'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//点击切换商城
			currentShop(id, name) {
				let params = {
					shop_id: id,
				};
				this.$api('Shop/edit', params).then(data => {
					if (data.status == 1) {
						this.showArea = !this.showArea;
						uni.setStorageSync('shopName', name);
						uni.setStorageSync('shopId', id);
						this.$showToast(data.msg);
						this.$store.commit('setLoginAction', {
							loginAction: true,
							_this: this,
						});
						this.loadUserDetail();
					} else {
						this.$showToast(data.msg);
					}
				});
			},
			//加载商城列表
			loadShop() {
				this.$api('Shop/lists').then(data => {

					if (data.status == 1) {
						this.shopList = data.data.list;
					}
				});
			},
			//加载个人资料
			loadUserDetail() {
				this.$api2('UserCenter/index').then(data => {
					if (data.status == 1) {
						this.userInfo = data.data.user;
						this.loginStatus = true;
						this.orderCount = data.data.order_count;
						this.walletInfo = data.data.wallet;
						this.$store.state.goods.service_phone = data.data.service_phone;
						if (data.data.special_wallet_pay !== null) {
							this.$store.commit('addSpecialPay', data.data.special_wallet_pay)
							this.specialPay = data.data.special_wallet_pay
							this.specialWallet = data.data.special_wallet_balance
						} else {
							this.specialPay = []
							this.specialWallet = "0"
						}
						uni.setStorageSync('shopId', data.data.shop_id);

					} else {
						this.$showToast(data.msg);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.order-window {
		text-align: center;

		.item {
			padding: 20rpx 10rpx;
		}

		.img {
			width: 80rpx;
			height: 80rpx;
			display: block;
		}

		.title {
			font-size: 24rpx;
			line-height: 1.5;
		}
	}

	.integral-item {
		width: 75%;

		.value {
			// font-weight: bold;
			font-size: 36rpx;
			line-height: 1.5;
		}

		.title {
			font-size: 24rpx;

		}
	}

	.btn-item {
		.sign-btn {
			width: 100%;
			padding: 16rpx 0;
			background: linear-gradient(to left, #19be6b, #71d5a1);
			border-radius: 60rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}


	.user-window {
		padding: 50rpx 40rpx;

		.head-window {
			width: 120rpx;
			height: 120rpx;
			box-shadow: 0rpx 0rpx 6rpx #808080;
			border-radius: 50%;
			box-sizing: border-box;

			.head {
				height: 120rpx;
				width: 120rpx;
				border-radius: 50%;
				display: block;
			}
		}

		.nickname-window {
			padding: 0 40rpx;
			font-weight: bold;
			font-size: 34rpx;
		}
	}
</style>